<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, user-scalable=no, initial-scale=1.0.maximum-scale=1.0,minimum-scale=1.0"
    />
    <!-- 兼容  要求当前网页使用IE浏览器最高版本的内核来渲染 -->
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <!-- 解决ie9以下浏览器对html5新增标签的不识别 并导致css不起作用的问题 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
    <!-- Bootstrap -->
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
      rel="stylesheet"
    />
    <title>我的工作台</title>
    <link rel="stylesheet" href="css/index.css" />
    <link rel="stylesheet" href="css/swiper.min.css" />
    <script src="js/flexible.js"></script>
  </head>
  <body>
    <div class="container">
      <div class="row header">
        <div class="col-md-7">
          <a href="#">
            <img src="images/logo.png" alt="" />
          </a>
        </div>
        <ul class="col-md-5 nav">
          <li>
            <a href="#">家</a>
          </li>
          <li>
            <a href="#">作品集</a>
          </li>
          <li>
            <a href="#">博客</a>
          </li>
          <li>
            <a href="#">关于我们</a>
          </li>
          <li>
            <a href="#">联系</a>
          </li>
        </ul>
      </div>
    </div>
    <!-- Swiper -->
    <div class="con-nav">
      <div class="swiper-container swiper1">
        <div class="swiper-wrapper">
          <div class="swiper-slide">
            <div class="container">
              <div class="col-md-6">
                <h3>我们相信</h3>
                <h3>品质设计</h3>
                <p class="nth1">任何创意项目都是独一无二的</p>
                <p class="nth2">并应提供</p>
                <p class="nth3">适当的质量</p>
                <span class="xd">现在下单 !</span>
              </div>
              <div class="col-md-6">
                <img src="upload/banner-left.png" alt="" class="imgS" />
              </div>
            </div>
          </div>
          <div class="swiper-slide">
            <div class="container">
              <div class="col-md-7">
                <img src="upload/banner-left.png" alt="" class="imgS" />
              </div>
              <div class="col-md-5">
                <h3>我们相信</h3>
                <h3>品质设计</h3>
                <p class="nth1">任何创意项目都是独一无二的</p>
                <p class="nth2">并应提供</p>
                <p class="nth3">适当的质量</p>
                <span class="xd">现在下单 !</span>
              </div>
            </div>
          </div>
          <div class="swiper-slide">
            <div class="container">
              <div class="col-md-6">
                <h3>我们相信</h3>
                <h3>品质设计</h3>
                <p class="nth1">任何创意项目都是独一无二的</p>
                <p class="nth2">并应提供</p>
                <p class="nth3">适当的质量</p>
                <span class="xd">现在下单 !</span>
              </div>
              <div class="col-md-6">
                <img src="upload/banner-left.png" alt="" class="imgS" />
              </div>
            </div>
          </div>
          <div class="swiper-slide">
            <div class="container">
              <div class="col-md-7">
                <img src="upload/banner-left.png" alt="" class="imgS" />
              </div>
              <div class="col-md-5">
                <h3>我们相信</h3>
                <h3>品质设计</h3>
                <p class="nth1">任何创意项目都是独一无二的</p>
                <p class="nth2">并应提供</p>
                <p class="nth3">适当的质量</p>
                <span class="xd">现在下单 !</span>
              </div>
            </div>
          </div>
          <div class="swiper-slide">
            <div class="container">
              <div class="col-md-6">
                <h3>我们相信</h3>
                <h3>品质设计</h3>
                <p class="nth1">任何创意项目都是独一无二的</p>
                <p class="nth2">并应提供</p>
                <p class="nth3">适当的质量</p>
                <span class="xd">现在下单 !</span>
              </div>
              <div class="col-md-6">
                <img src="upload/banner-left.png" alt="" class="imgS" />
              </div>
            </div>
          </div>
          <div class="swiper-slide">
            <div class="container">
              <div class="col-md-7">
                <img src="upload/banner-left.png" alt="" class="imgS" />
              </div>
              <div class="col-md-5">
                <h3>我们相信</h3>
                <h3>品质设计</h3>
                <p class="nth1">任何创意项目都是独一无二的</p>
                <p class="nth2">并应提供</p>
                <p class="nth3">适当的质量</p>
                <span class="xd">现在下单 !</span>
              </div>
            </div>
          </div>
        </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination swiper2"></div>
        <!-- Add Arrows -->
        <div class="swiper-button-next"></div>
        <div class="swiper-button-prev"></div>
      </div>
    </div>
    <!-- 创意设计品质 -->
    <div class="container">
      <div class="nav-box">
        <h1>我们的创意设计品质</h1>
        <h4>我们专注于网页设计/开发</h4>
        <ul class="flex">
          <li class="flex1">
            <a href="#">
              <div class="huHua">
                <img src="upload/pic.jpg" alt="" />
              </div>
              <div class="imG">
                <h4>重新设计</h4>
                <h4>个性</h4>
                <p>
                  <span>在</span>
                  <span class="yellow">网页设计</span>
                </p>
              </div>
            </a>
          </li>
          <li class="flex1">
            <a href="#">
              <div class="huHua">
                <img src="images/icon1.png" alt="" />
                <h4 class="web">WEB开发</h4>
              </div>
              <div class="imG1">
                Lorem ipsum胡萝卜，改善本科生发展水平，提高sed nibh的绩效
              </div>
            </a>
          </li>
          <li class="flex1">
            <a href="#">
              <div class="huHua">
                <img src="images/icon2.png" alt="" />
                <h4 class="web">网页设计</h4>
              </div>
              <div class="imG1">
                Lorem ipsum胡萝卜，改善本科生发展水平，提高sed nibh的绩效
              </div>
            </a>
          </li>
          <li class="flex1">
            <a href="#">
              <div class="huHua">
                <img src="images/icon3.png" alt="" />
                <h4 class="web">平面设计</h4>
              </div>
              <div class="imG1">
                Lorem ipsum胡萝卜，改善本科生发展水平，提高sed nibh的绩效
              </div>
            </a>
          </li>
        </ul>
      </div>
    </div>
    <!-- 我们的工作 -->

    <div class="nav-img">
      <div class="hd">
        <h4>我们的工作</h4>
        <p>Lorem ipsum胡萝卜，改善本科生发展水平，提高sed nibh的绩效</p>
      </div>
      <ul class="bd">
        <li>
          <a href="#"> <img src="upload/pic1.jpg" alt="" /></a>
        </li>
        <li>
          <a href="#">
            <img src="upload/pic2.jpg" alt="" />
          </a>
        </li>
        <li>
          <a href="#">
            <img src="upload/pic3.jpg" alt="" />
          </a>
        </li>
        <li>
          <a href="#">
            <img src="upload/pic4.jpg" alt="" />
          </a>
        </li>
        <li>
          <a href="#">
            <img src="upload/pic5.jpg" alt="" />
          </a>
        </li>
        <li>
          <a href="#">
            <img src="upload/pic6.jpg" alt="" />
          </a>
        </li>
        <li>
          <a href="#">
            <img src="upload/pic7.jpg" alt="" />
          </a>
        </li>
        <li>
          <a href="#">
            <img src="upload/pic8.jpg" alt="" />
          </a>
        </li>
        <li>
          <a href="#">
            <img src="upload/pic9.jpg" alt="" />
          </a>
        </li>
        <li>
          <a href="#">
            <img src="upload/pic10.jpg" alt="" />
          </a>
        </li>
        <li>
          <a href="#">
            <img src="upload/pic11.jpg" alt="" />
          </a>
        </li>
        <li>
          <a href="#"> <img src="upload/pic1.jpg" alt="" /></a>
        </li>
        <li>
          <a href="#">
            <img src="upload/pic2.jpg" alt="" />
          </a>
        </li>
        <li>
          <a href="#">
            <img src="upload/pic3.jpg" alt="" />
          </a>
        </li>
        <li>
          <a href="#">
            <img src="upload/pic4.jpg" alt="" />
          </a>
        </li>
        <li>
          <a href="#">
            <img src="upload/pic5.jpg" alt="" />
          </a>
        </li>
        <li>
          <a href="#">
            <img src="upload/pic6.jpg" alt="" />
          </a>
        </li>
        <li>
          <a href="#">
            <img src="upload/pic7.jpg" alt="" />
          </a>
        </li>
        <li>
          <a href="#">
            <img src="upload/pic8.jpg" alt="" />
          </a>
        </li>
        <li>
          <a href="#">
            <img src="upload/pic9.jpg" alt="" />
          </a>
        </li>
        <li>
          <a href="#">
            <img src="upload/pic10.jpg" alt="" />
          </a>
        </li>
      </ul>
    </div>

    <!-- 客户群 -->

    <div class="app-nav">
      <div class="hd">
        <h4>客户群</h4>
        <p>Lorem ipsum胡萝卜，改善本科生发展水平，提高sed nibh的绩效</p>
      </div>
      <div class="bd">
        <div class="swiper-container swiper3">
          <div class="swiper-wrapper">
            <div class="swiper-slide">
              <a href="#">
                <img src="upload/client1.jpg" alt="" />
              </a>
            </div>
            <div class="swiper-slide">
              <a href="#">
                <img src="upload/client2.jpg" alt="" />
              </a>
            </div>
            <div class="swiper-slide">
              <a href="#">
                <img src="upload/client3.jpg" alt="" />
              </a>
            </div>
            <div class="swiper-slide">
              <a href="#">
                <img src="upload/client4.jpg" alt="" />
              </a>
            </div>
            <div class="swiper-slide">
              <a href="#">
                <img src="upload/client5.jpg" alt="" />
              </a>
            </div>
            <div class="swiper-slide">
              <a href="#">
                <img src="upload/client6.jpg" alt="" />
              </a>
            </div>
            <div class="swiper-slide">
              <a href="#">
                <img src="upload/client7.jpg" alt="" />
              </a>
            </div>
            <div class="swiper-slide">
              <a href="#">
                <img src="upload/client8.jpg" alt="" />
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 推广 -->

    <div class="bottom">
      <div class="container">
        <div class="row">
          <ul class="zuo">
            <li>
              <h3>关于我们</h3>
            </li>
            <li>
              洛雷姆·伊普苏姆·多洛尔（Lorem ipsum
              dolor）坐立不安，奉献高尚，温和的精力和活力，使劳动和悲伤成为eiusmod要做的一些重要事情。多年以来，我会来，谁也会轻率地锻炼出她的运动优势，从而使学区和长寿得到刺激。想要在铜杯小药囊中遭受痛苦的人一直在批评Duis
              et dolore大逃亡并没有产生任何愉悦感。
            </li>
            <li>学到更多</li>
            <li><h3>照片流</h3></li>
            <li>
              <a href="#">
                <img src="upload/g1.jpg" alt="" />
              </a>
              <a href="#">
                <img src="upload/g2.jpg" alt="" />
              </a>
              <a href="#">
                <img src="upload/g3.jpg" alt="" />
              </a>
              <a href="#">
                <img src="upload/g4.jpg" alt="" />
              </a>
              <a href="#">
                <img src="upload/g5.jpg" alt="" />
              </a>
              <a href="#">
                <img src="upload/g6.jpg" alt="" />
              </a>
            </li>
          </ul>
          <ul class="zho">
            <li>
              <h3>最新推文</h3>
            </li>
            <li>
              <div>
                <img src="images/tw.png" alt="" />
              </div>

              <span>Lorem ipsum</span>
              <a href="#">
                <span class="c41">consectetuer</span>
              </a>
              <span>adipiscing elit, seddia</span>
              <p class="c41">web design</p>
            </li>
            <li>
              <div>
                <img src="images/tw.png" alt="" />
              </div>

              <span>Lorem ipsum</span>
              <a href="#">
                <span class="c41">consectetuer</span>
              </a>
              <span>adipiscing elit, seddia</span>
              <p class="c41">web design</p>
            </li>
            <li>
              <div>
                <img src="images/tw.png" alt="" />
              </div>

              <span>Lorem ipsum dolor sit amet,</span>s
              <a href="#">
                <span class="c41">consectetuer</span>
              </a>
              <span>adipiscing elit, sed diam nonummy nibh</span>
              <p class="c41">web design</p>
            </li>
            <li>
              <div>
                <img src="images/tw.png" alt="" />
              </div>

              <span>Lorem ipsum dolor sit amet,</span>s
              <a href="#">
                <span class="c41">consectetuer</span>
              </a>
              <span>adipiscing elit, sed diam nonummy nibh</span>
              <p class="c41">web design</p>
            </li>
            <li>
              <div>
                <img src="images/tw.png" alt="" />
              </div>

              <span>Lorem ipsum</span>
              <a href="#">
                <span class="c41">consectetuer</span>
              </a>
              <span>adipiscing elit, seddia</span>
              <p class="c41">web design</p>
            </li>
            <li class="sc"><h4>Social Connecting</h4></li>
          </ul>
          <ul class="you clearfix">
            <li class="clearfix">
              <h3>Contact info</h3>
            </li>
            <li class="clearfix">
              <img src="images/address.png" alt="" />
              <p>
                Lorem ipsum dolor sit amet,consectetuer adipiscing elit, sed
                diam nonummy nibh web design
              </p>
            </li>
            <li class="clearfix">
              <img src="images/phone.png" alt="" />
              <p>Phone: +1 800 258 2689 +1 800 258 2689</p>
            </li>
            <li class="clearfix">
              <img src="images/msg.png" alt="" />
              <p>
                Email:
                <a href="#"><span class="c41">info(at)skokov.com</span></a>
              </p>
            </li>
            <li class="clearfix">
              <h3>Follow Us</h3>
              <p>
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed
                diam nonummy nibh euismod
              </p>
            </li>
          </ul>
        </div>
      </div>
    </div>

    <!-- bottom-nav -->
    <div class="bottom-nav">
      <div class="container">
        <div class="row">
          <div class="left">
            <p>Copyright © 2014.Company name All rights reserved</p>
          </div>
          <div class="right">
            <ul>
              <li>
                <a href="#">
                  <span>HOME</span>
                </a>
              </li>
              <li>
                <a href="#">
                  <span>PORTFOLIO</span>
                </a>
              </li>
              <li>
                <a href="#">
                  <span>BLOG</span>
                </a>
              </li>
              <li>
                <a href="#">
                  <span>ABOUT US</span>
                </a>
              </li>
              <li>
                <a href="#">
                  <span>CONTACT</span>
                </a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>

    <!--  -->

    <!--  -->

    <!--  -->

    <script src="js/swiper.min.js"></script>

    <!-- Initialize Swiper -->
    <script>
      (function () {
        var swiper = new Swiper(".swiper1", {
          spaceBetween: 30,
          centeredSlides: true,
          autoplay: {
            delay: 2500,
            disableOnInteraction: false,
          },
          pagination: {
            el: ".swiper2",
            clickable: true,
          },
          navigation: {
            nextEl: ".swiper-button-next",
            prevEl: ".swiper-button-prev",
          },
        });
      })();
      // 第二个
      (function () {
        effect = 0;
        var swiper = new Swiper(".swiper3", {
          loop: true,
          speed: 2500,
          autoplay: {
            delay: 2500,
            disableOnInteraction: false,
          },

          slidesPerView: 5,
          spaceBetween: 30,
          centeredSlides: true,
          watchSlidesProgress: true,
          on: {
            setTranslate: function () {
              slides = this.slides;
              for (i = 0; i < slides.length; i++) {
                slide = slides.eq(i);
                progress = slides[i].progress;
                //slide.html(progress.toFixed(2)); 看清楚progress是怎么变化的
                slide.css({ opacity: "", background: "" });
                slide.transform(""); //清除样式

                if (effect == 1) {
                  slide.transform(
                    "scale(" + (1 - Math.abs(progress) / 8) + ")"
                  );
                } else if (effect == 2) {
                  slide.css("opacity", 1 - Math.abs(progress) / 6);
                  slide.transform(
                    "translate3d(0," + Math.abs(progress) * 20 + "px, 0)"
                  );
                } else if (effect == 3) {
                  slide.transform("rotate(" + progress * 30 + "deg)");
                } else if (effect == 4) {
                  slide.css(
                    "background",
                    "rgba(" +
                      (255 - Math.abs(progress) * 20) +
                      "," +
                      (127 + progress * 32) +
                      "," +
                      Math.abs(progress) * 64 +
                      ")"
                  );
                }
              }
            },
            setTransition: function (transition) {
              for (var i = 0; i < this.slides.length; i++) {
                var slide = this.slides.eq(i);
                slide.transition(transition);
              }
            },
          },
          // navigation: {
          //   nextEl: ".swiper-button-next",
          //   prevEl: ".swiper-button-prev",
          // },
          // pagination: {
          //   el: ".swiper4",
          //   clickable: true,
          // },
        });

        pe = document.getElementById("progressEffect");
        pe.onchange = function () {
          effect = this.value;
          swiper.update();
        };
      })();
    </script>
  </body>
</html>
